<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <title>算力包增值服务详情</title>
    <link rel="stylesheet" href="../../css/reset.css" />
    <style>
        body {
            width: 100%;
            background-color: #f6f6f6;
            font-size: 0.26rem;
            padding-top: 0.5rem;
            height: auto;
            padding-bottom: 0.26rem;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: PingFang SC;
            color: #333333;
            padding-bottom: 1.2rem;
        }

        .testFix {
            width: 100%;
            height: 1rem;
            position: fixed;
            top: 0;
            left: 0;
            background: url("../../image/asasafg.jpg") no-repeat center;
            background-size: 100% 100%;
            z-index: 100;
        }

        .head {
            width: 100%;
            height: 47px;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
            box-sizing: border-box;
            padding: 0 0.26rem;
        }

        .head img {
            width: 0.21rem;
            height: 0.36rem;
        }

        .head_title {
            font-size: 0.32rem;
            color: #333333;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .showimg {
            width: 100%;
            height: 4.22rem;
        }

        .showimg img {
            width: 100%;
            height: 4.22rem;
        }

        .showItemheader {
            width: 100%;
            height: 3.2rem;
            background: url("../../image/sjdlfj.png") no-repeat center;
            background-size: cover;
            margin-top: 0.3rem;
            padding: 0 0.3rem;
            display: flex;
            display: -webkit-flex;
            align-items: flex-end;
            justify-content: center;
            box-sizing: border-box;

        }

        .showItemheader>div {
            width: 100%;
            height: 2.3rem;
            background: rgba(254, 255, 255, 1);
            box-shadow: 0px 0.14rem 0.35rem 0px rgba(224, 224, 224, 0.1);
            border-radius: 0.06rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
        }

        .showItemheader>div>p {
            width: 1.94rem;
            height: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding-top: 0.34rem;
            box-sizing: border-box;
        }

        .showItemheader>div ul {
            flex: 1;
            height: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        .showItemheader>div ul li {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: flex-start;
            justify-content: flex-start;
            padding: 0 0.3rem;
            box-sizing: border-box;
        }

        .showItemheader>div ul li:first-of-type {
            margin-top: 0.34rem;
            margin-bottom: 0.32rem;
            font-size: 0.32rem;
        }

        .showItemheader>div ul li:last-of-type {
            margin-top: 0.3rem;
            color: rgba(48, 20, 5, 1);
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(48, 20, 5, 0.66);
        }

        .stausImg {
            width: 1.18rem;
            height: 1.04rem;
        }

        .canletext,
        .workingtext {
            width: 1.2rem;
            height: 0.48rem;
            border-radius: 0.08rem;
            text-align: center;
            line-height: 0.48rem;
            font-weight: 500;
        }

        .canletext {
            background: rgba(66, 170, 121, 0.06);
            color: #42AA79;
        }

        .workingtext {
            background: rgba(244, 244, 244, 0.99);
            color: rgba(137, 137, 137, 1);
        }

        .showAboutMachine {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            box-sizing: border-box;
            padding: 0 0.3rem;
        }

        .showtextdetail {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            background-color: #fff;
            box-shadow: 0 0.14rem 0.35rem 0 rgba(224, 224, 224, 0.1);
            box-sizing: border-box;
            padding-top: 0.28rem;
        }

        .showtextdetail p {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: flex-start;
            background-color: #fff;
            padding: 0 0.28rem;
            box-sizing: border-box;
            margin-bottom: 0.33rem;
        }

        .showtextdetail p:last-of-type {
            margin-bottom: .28rem;
        }

        .detailTitle {
            width: 100%;
            font-size: 0.3rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(24, 24, 24, 1);
            margin-top: 0.2rem;
            background-color: #ffffff;
            box-sizing: border-box;
            padding-left: 0.28rem;
            padding-top: 0.38rem;
            padding-bottom: 0.11rem;
            border-radius: 0.1rem 0.1rem 0 0;
        }

        .contractTitle {
            width: 100%;
            font-size: 0.26rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
            background-color: #ffffff;
            box-sizing: border-box;
            padding-left: 0.28rem;
            padding-bottom: 0.44rem;
            border-radius: 0 0 0.1rem 0.1rem;
        }

        .openContract {
            color: #268CFF;
        }

        .showtextdetail p span:first-of-type {
            margin-right: 0.7rem;
            display: inline-block;
            width: 1.9rem;
            font-size: 0.26rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(142, 151, 158, 1);
        }

        .showtextdetail p span:last-of-type {
            display: flex;
            display: -webkit-flex;
            flex: 1;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .showbasePower {
            width: 100%;
            height: 0.9rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;
            padding: 0 0.26rem;
            box-sizing: border-box;
            margin-top: 0.2rem;
            border-radius: 6px;
            font-weight: 500;
        }

        .showwork {
            width: 100%;
            background-color: #fff;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 0.2rem;
            margin-bottom: 0.2rem;
            border-radius: 0 0.08rem;
        }

        .showdays {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0.3rem;
            box-sizing: border-box;
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(142, 151, 158, 1);
        }

        .showdays>span:first-of-type {
            color: rgba(254, 172, 20, 1);
        }

        .endDays {
            color: #F85252;
        }

        .progressOutbox {
            width: 6.2rem;
            height: 0.06rem;
            background-color: #EFEFEF;
            margin-top: 0.2rem;
            margin-bottom: 0.25rem;
            display: flex;
            display: -webkit-flex;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            overflow: hidden;
        }

        .progressInbox {
            width: 0;
            height: 0.06rem;
            background-color: #FFB733;
            border-radius: 0 0.08rem 0.08rem 0;
        }

        .showworkPrice {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            justify-content: flex-start;
            align-items: center;
            padding: 0 0.3rem;
            box-sizing: border-box;
            font-size: 0.24rem;
            font-family: DIN Medium;
            font-weight: 400;
            color: rgba(38, 38, 38, 1);
            margin-bottom: 0.31rem;
        }

        .showworkPrice>span:last-of-type {
            color: rgba(38, 38, 38, 0.53);
        }

        .settlementDetail {
            width: 100%;
            height: auto;
            box-sizing: border-box;
        }

        .settlementItem {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            background-color: #fff;
            box-shadow: 0 0.14rem 0.35rem 0 rgba(224, 224, 224, 0.1);
            box-sizing: border-box;
            padding-top: 0.28rem;
        }

        .settlementItem p {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: flex-start;
            background-color: #fff;
            padding: 0 0.28rem;
            box-sizing: border-box;
            margin-bottom: 0.33rem;
            position: relative;
        }

        .settlementItem p>b {
            position: absolute;
            left: 0.28rem;
            top: 0.35rem;
            font-size: 0.18rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(163, 173, 180, 1);
        }

        .settlementItem p:last-of-type {
            margin-bottom: .45rem;
        }

        .settlementItem p>span:first-of-type {
            display: flex;
            display: -webkit-flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 0.1rem;
        }

        .settlementItem p>span:first-of-type>span:first-of-type {
            margin-right: 0.4rem;
            display: inline-block;
            width: 1.9rem;
            font-size: 0.26rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: #8E979E;
        }

        .settlementItem p>span:first-of-type>span:last-of-type {
            color: #262626;
        }

        .settlementItem p>span:last-of-type {
            color: rgba(38, 38, 38, 0.53);
        }

        .showMoreItem {
            position: relative;
        }

        .checkDetail {
            clear: both;
            width: 2.86rem;
            position: absolute;
            left: 0;
            bottom: -0.38rem;
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(38, 140, 255, 1);
        }
    </style>
</head>

<body>
    <div class="testFix">
        <div class="head" style="position: relative">
            <span id="goback"
                style="position: absolute;z-index: 1;left: 0;padding: 0 0.3rem; padding-right: 0.5rem;top: 0;height: 100%; box-sizing: border-box;line-height: 47px;">
                <img src="../../image/left_jiantouax.png" alt="" style="width: 10px;height: auto" />
            </span>
            <span class="head_title" style="display: block;width: 100%;text-align: center">
                增值服务详情
            </span>
            <span style="display: inline-block;width: 0.21rem;height: 0.36rem;">
            </span>
        </div>
    </div>
    <div class="showItemheader">
        <div>
            <ul>
                <li>
                    <b class="contractName">
                    </b>
                </li>
                <li class="severId"
                    style="font-size:0.24rem;font-family:PingFang SC;font-weight:500;color:rgba(48,20,5,0.64);">

                </li>
                <li>
                    合约销售方 <span style="color:rgba(48,20,5,0.66);margin-left: 0.37rem;"
                        class="contractCounterparty">BHPAY</span>
                </li>
            </ul>
            <p>
                <span class="canletext" style="display: none;">
                    已取消
                </span>
                <span class="workingtext" style="display: none;background-color: rgba(66,170,121,0.1);color:#42AA79;">
                    进行中
                </span>
                <img src="../../image/iconqqadx.png" class="stausImg" style="display: none;">
            </p>
        </div>
    </div>
    <div class="showAboutMachine">
        <p class="detailTitle">
            合约信息
        </p>
        <div class="showtextdetail">
            <p>
                <span>
                    保障总算力
                </span>
                <span class="showMoreItem">
                    0T
                    <b class="checkDetail" style="display: none;">
                        查看详情
                    </b>
                </span>
            </p>
            <p>
                <span class="baozhangLimit">
                    保障下限(--%)
                </span>
                <span class="digtime">
                    0.00CN
                </span>
            </p>
            <p>
                <span>
                    合约周期
                </span>
                <span class="calculateSource">
                    00天
                </span>
            </p>
            <p>
                <span>
                    合约期限
                </span>
                <span class="calculateTime" style="flex-wrap:wrap;">
                    2020/01/01至2020/02/01
                </span>
            </p>
            <p>
                <span>
                    下单时间
                </span>
                <span class="sartTime">
                    2020/01/01 00:01
                </span>
            </p>
            <p>
                <span>
                    合约费用
                </span>
                <span class="contractPrice">
                    0.00CNY
                </span>
            </p>
        </div>
        <div class="showwork">
            <p class="detailTitle">
                产出统计
            </p>
            <p class="showdays">
                <span>
                    已产出<span class="workingDays">0</span>天
                </span>
                <span>
                    距离结算<span class="endDays">0</span>天
                </span>
            </p>
            <div class="progressOutbox">
                <p class="progressInbox">

                </p>
            </div>
            <p class="showworkPrice">
                <span class="btcworkNum">
                    0.00000000 BTC
                </span>
                <span>
                    &nbsp;≈&nbsp;￥ <span class="prciework">0.00</span>
                </span>
            </p>
        </div>
        <div class="settlementDetail">
            <p class="detailTitle" style="margin-top: 0;">
                结算统计
            </p>
            <p class="detailTitle showworkIng"
                style="text-align: center;font-size:0.24rem;font-family:PingFang SC;font-weight:500;color:rgba(24,24,24,0.6);margin-top: 0;padding-left: 0;padding: 0.28rem 0;display: none;">
                暂未到结算日期
            </p>
            <div class="settlementItem" style="display: none;">
                <p>
                    <span>
                        <span>
                            结算类型
                        </span>
                        <!-- 状态颜色：正常解锁 color:rgba(255,178,38,1);  止损价回购 color:rgba(52,188,123,1);  止盈价回购 color:rgba(248,77,77,1); -->
                        <span class="settlementType" style="color: rgba(52, 188, 123, 1);">
                            算力宝补偿解锁
                        </span>
                    </span>
                    <span>
                    </span>
                </p>
                <p>
                    <span>
                        <span>
                            结算币价
                        </span>
                        <span class="currencyPrice">
                            0.0000000
                        </span>
                    </span>
                    <span>
                    </span>
                </p>
                <p>
                    <span>
                        <span>
                            算力产出
                        </span>
                        <span class="workBtcNum">
                            0.0000000 BTC
                        </span>
                    </span>
                    <span>
                        ≈ <span class="workBtcCny">0.00 CNY</span>
                    </span>
                </p>
                <p style="margin-bottom: 0.58rem;">
                    <span>
                        <span>
                            合约成本
                        </span>
                        <span class="myStandNum">
                            0.00 CNY
                        </span>
                    </span>
                    <span>
                    </span>
                    <b>
                        矿机+电费包
                    </b>
                </p>
                <p>
                    <span>
                        <span>
                            保障金额(<span class="roteLoss"></span>%)
                        </span>
                        <span class="outputRate">
                            00 CNY
                        </span>
                    </span>
                    <span>
                    </span>
                </p>
                <p>
                    <span>
                        <span>
                            算力宝补偿
                        </span>
                        <span class="suanlibaoGet">
                            --
                        </span>
                    </span>
                    <span class="suanlibaoDis">
                    </span>
                </p>
                <p style="margin-bottom: 0.58rem;">
                    <span>
                        <span>
                            实际结算
                        </span>
                        <span class="actualSettlement">
                            0.0000 BTC
                        </span>
                    </span>
                    <span>
                        ≈ <span class="actualSettlementCny">0.00 CNY</span>
                    </span>
                    <b>
                        算力产出+算力宝补偿
                    </b>
                </p>
                <p>
                    <span>
                        <span>
                            结算时间
                        </span>
                        <span class="settlementTime">
                            0000-00-00 00:00:00
                        </span>
                    </span>
                    <span>
                    </span>
                </p>
            </div>
        </div>
        <script src="../../script/autosize.js"></script>
        <script src="../../script/jquery_three_two_one.js"></script>
        <script src="../../script/fastclick.js"></script>
        <script src="../../script/app.js"></script>
        <script>
            apiready = function () {
                var app = new APP();
                var account = app.getAccount();
                var insuranceContract = api.pageParam.insuranceContract;//服务合约详情
                var newInsuranceOrder = api.pageParam.newInsuranceOrder;//算力包合约详情
                var machineDetail = api.pageParam.machineDetail;//机器所有信息
                // console.log("************" + JSON.stringify(machineDetail));
                function today() {
                    var today = new Date();
                    var str = "";
                    str += today.getFullYear() + "-";
                    var month = today.getMonth() + 1;//返回值是 0（一月） 到 11（十二月） 之间的一个整数。
                    if (month < 10) {
                        str += "0";
                    }
                    str += month + "-";
                    var day = today.getDate();//返回值是 1 ~ 31 之间的一个整数
                    if (day < 10) {
                        str += "0";
                    }
                    str += day;
                    return str;
                }
                $(".contractName").text(insuranceContract.name);
                $(".contractCounterparty").text(insuranceContract.enemy);
                $(".severId").text(newInsuranceOrder.order_id);
                var lowerLimit = app.accDiv(app.accMul(newInsuranceOrder.security, newInsuranceOrder.degression), 100);
                $(".digtime").text((newInsuranceOrder.pay_currency_code == "CNY" ? app.sliceNum(lowerLimit, 2) : app.sliceNum(lowerLimit, 4)) + newInsuranceOrder.pay_currency_code);
                $(".calculateSource").text(newInsuranceOrder.date_num + "天");
                $(".sartTime").text(newInsuranceOrder.create_time.replace(/-/g, "/"));
                $(".contractPrice").text((newInsuranceOrder.pay_currency_code == "CNY" ? app.sliceNum(newInsuranceOrder.pay_amount, 2) : app.sliceNum(newInsuranceOrder.pay_amount, 4)) + " " + newInsuranceOrder.pay_currency_code);
                $(".calculateTime").text(String(newInsuranceOrder.create_time).replace(/-/g, "/") + "至" + newInsuranceOrder.settlement_time.replace(/-/g, "/"));
                $(".showMoreItem").text(app.sliceNum(newInsuranceOrder.power, 2) + " T");
                var beforeData = machineDetail.toNow;
                $(".workingDays").text(beforeData);
                $(".endDays").text(machineDetail.eToEnd);
                var totalData = app.DateDiff2(newInsuranceOrder.create_time, newInsuranceOrder.settlement_time) - 2;
                if (beforeData >= 0) {
                    var classWidth = String(app.sliceNum(((beforeData * 100) / totalData), 3) + "%");
                    $(".progressInbox").css({
                        width: classWidth
                    })
                };
                $(".baozhangLimit").text("保障下限(" + machineDetail.insuranceContract.stop_loss_rate + "%)");
                $(".btcworkNum").text((machineDetail.btcIncomeNum == 0 ? "0.00000000" : machineDetail.btcIncomeNum) + "个/" + "BTC")
                var btcIncomeCny = app.accMul(machineDetail.btcIncomeNum, machineDetail.btcPrice);
                $(".prciework").text(app.sliceNum(btcIncomeCny, 2));
                $(".workBtcNumBtc").text(newInsuranceOrder.degression + newInsuranceOrder.pay_currency_code);
                if (newInsuranceOrder.settlement_state == 1) {
                    $(".stausImg,.settlementItem").show();
                } else if (newInsuranceOrder.settlement_state == 2) {
                    $(".canletext,.settlementItem").show();
                } else {
                    $(".workingtext,.showworkIng").show();
                    $(".checkDetail").show();
                }
                if (newInsuranceOrder.settlement_type == 1) {
                    $(".settlementType").text("正常解锁").css("color", "rgba(255,178,38,1)");
                } else if (newInsuranceOrder.settlement_type == 2) {
                    $(".settlementType").text("算力包补偿解锁").css("color", "rgba(52,188,123,1)");
                } else {
                    $(".settlementType").text("默认解锁").css("color", "rgba(248,77,77,1)");
                }
                if (newInsuranceOrder.settlement_state != 0) {
                    $(".roteLoss").text(newInsuranceOrder.security);//保障金额率
                    $(".currencyPrice").text(app.sliceNum(newInsuranceOrder.settlement_coin_price, 2) + " CNY");//结算币价
                    $(".workBtcNum").text((machineDetail.btcIncomeNum == 0 ? "0.00000000" : machineDetail.btcIncomeNum) + " BTC")//算力产出BTC
                    var actualSettlementTotal = app.accMul(machineDetail.btcIncomeNum, newInsuranceOrder.settlement_coin_price);
                    $(".workBtcCny").text(app.sliceNum(actualSettlementTotal, 2) + " CNY");
                    var roteLossNum = app.accDiv(newInsuranceOrder.security, 100);
                    if (newInsuranceOrder.pay_currency_code == "CNY") {
                        outputRateNum = app.sliceNum(app.accMul(newInsuranceOrder.degression, roteLossNum), 2);
                        newInsuranceOrder.degression = app.sliceNum(newInsuranceOrder.degression, 2);
                    } else {
                        outputRateNum = app.sliceNum(app.accMul(newInsuranceOrder.degression, roteLossNum), 4);
                        newInsuranceOrder.degression = app.sliceNum(newInsuranceOrder.degression, 4);
                    }
                    $(".myStandNum").text(newInsuranceOrder.degression + newInsuranceOrder.pay_currency_code);
                    $(".suanlibaoGet").text(app.sliceNum(newInsuranceOrder.compensation, 8) + " BTC");
                    var suanlibaoDis = app.accMul(app.sliceNum(newInsuranceOrder.compensation, 8), newInsuranceOrder.settlement_coin_price);
                    $(".suanlibaoDis").text(" ≈ " + app.sliceNum(suanlibaoDis, 2) + " CNY")
                    $(".actualSettlement").text(app.sliceNum(newInsuranceOrder.settlement_amount, 8) + " BTC");
                    var actualSettlementCny = app.accMul(newInsuranceOrder.settlement_amount, newInsuranceOrder.settlement_coin_price);
                    $(".actualSettlementCny").text(app.sliceNum(actualSettlementCny, 2) + " CNY");
                    $(".outputRate").text(outputRateNum + newInsuranceOrder.pay_currency_code);
                    $(".settlementTime").text(newInsuranceOrder.settlement_time);
                }
                $("#goback").on("click", function () {
                    app.closeW("suanlibao_detail");
                });
            }

        </script>
</body>

</html>